import React from 'react';
import { View, Text, Button, StatusBar, SafeAreaView } from 'react-native';
import { StackActions } from 'react-navigation';
export default class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title            : navigation.getParam('otherParam', 'A Nested Details Screen'),
      headerStyle      : {
        backgroundColor : '#6a51ae'
      },
      headerTintColor  : '#fff',
      headerTitleStyle : {
        fontWeight : 'bold'
      }
    };
  };
  render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');
    const otherParam = navigation.getParam('otherParam', 'some default value');
    const popAction = StackActions.pop({
      n : 4
    });

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <StatusBar barStyle='light-content' backgroundColor='#6a51ae' />
        <Text style={{ color: '#ffff' }}>Details Screen </Text>
        <Text style={{ color: '#ffff' }}>itemId: {JSON.stringify(itemId)}</Text>
        <Text style={{ color: '#ffff' }}>otherParam: {JSON.stringify(otherParam)}</Text>
        <Button
          title='Go to Details... again'
          onPress={() =>
            this.props.navigation.push('Details', {
              itemId : Math.floor(Math.random() * 100)
            })}
        />
        <Button title='Go to Home' onPress={() => this.props.navigation.navigate('Home')} />
        <Button title='Go back' onPress={() => this.props.navigation.goBack()} />
        <Button title='回到堆栈中的第一个屏幕' onPress={() => this.props.navigation.dispatch(StackActions.popToTop())} />
        <Button title='您带回到堆栈中的n个屏幕' onPress={() => this.props.navigation.dispatch(popAction)} />
      </View>
    );
  }
}

//https://reactnavigation.org/docs/3.x/stack-actions
// https://www.cnblogs.com/tengyuxin/p/11801682.html
